<template>
  <div class="box">
    <div class="head">
      <MyHead></MyHead>
    </div>
    <div class="container">
      <div class="left">
    <Left></Left>
    </div>
    <div class="center">
    <Center></Center>

    </div>
    <div class="right">
    <Right></Right>
    </div>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import Left from '@/components/left'
import Center from '@/components/center'
import Right from '@/components/right'
import MyHead from '@/components/MyHead'
export default {
  name: "HelloWorld",
  components:{
Left,
    Center,
    Right,
    MyHead
  },
  
};
</script>

<style  >
.box{
  width: 100%;
  height: 100vh;
}
.head{
  height: 10%;
}
.container{
  display: flex;
  height: 90%;
}
 .left{
  flex:1;
   border: 1px solid #fff;
 }
 .right{
   flex:1;

   border: 1px solid #fff;

 }
 .center{
   flex: 1;
   border: 1px solid #fff;

 }
  
</style>